<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<head th:include="layout :: htmlhead" th:with="title='后台管理'">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!--头-->
        <div th:replace="fragments/head :: header"></div>
        <div class="layui-body">
        
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>生产计划</legend>
</fieldset>
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-newproduct">新增生产计划</button>
        <button class="layui-btn" id="btn-import">导入生产计划</button>
        <button class="layui-btn" id="btn-refresh">刷新计算</button>
    </div>
<table class="layui-table" lay-data="{url:'/getProductPlan', page:true,id:'test3'}" lay-filter="test3">
  <thead>
    <tr>
<th lay-data="{field:'ccode', width:100, edit: 'text'}">订单编号</th>
<th lay-data="{field:'cinvaddcode', width:100, edit: 'text'}">代码</th>
<th lay-data="{field:'cinvname', width:100, edit: 'text'}">名称</th>
<th lay-data="{field:'fquantity', width:100, edit: 'text'}">要求产量</th>
<th lay-data="{field:'planstarttime', width:100, edit: 'text'}">计划开始时间</th>
<th lay-data="{field:'planendtime', width:100, edit: 'text'}">计划完成时间</th>
<th lay-data="{field:'endtime', width:100, edit: 'text'}">完成时间</th>
<th lay-data="{ field: 'cancomplete', width: 180, align: 'center', templet: '#titleTpl'}">库存满足</th>
      <th lay-data="{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}"> </th>
    </tr>
  </thead>
</table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs" lay-event="complete">完成</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="titleTpl">
  {{#  if(d.cancomplete == 0){ }}
    <i class="layui-icon layui-icon-rate layui-bg-red">无法满足</i>
  {{#  } else if (d.cancomplete == 1){ }}
    <i class="layui-icon layui-icon-rate-half layui-bg-orange">采购后满足</i>
  {{#  } else { }}
    <i class="layui-icon layui-icon-rate-solid layui-bg-green">库存零件满足</i>
  {{#  } }}
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;

  //监听工具条
  table.on('tool(test3)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
      window.location='/aps/productDetail.html';
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
      layer.msg('编辑操作');
    } else if(layEvent === 'complete'){
      layer.msg('完成操作');
    }
  });
  //监听单元格编辑
  table.on('edit(test3)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });
});
</script>
        </div>
        <!--底部-->
        <div th:replace="fragments/footer :: footer"></div>
    </div>
</body>
</html>